<template>
    <div :class="[selected ? 'leftCome' : 'leftLeave', 'view3']"></div>
</template>

<script>
export default {
    name: "view3",
    props: ["selected"]
}
</script>

<style scoped>
.view3 {
    width: 25%;
    height: 100%;
    background-color: green;
}

/* 过渡动画 */
.left-enter-from {
    transform: translateX(-100%);
}
.left-enter-active {
    transition: transform .5s ease-out;
}
.left-enter-to {

}
.left-leave-from {
    
}
.left-leave-active {
    transition: transform .5s ease-out;
}
.left-leave-to {
    transform: translateX(-100%);
    /* opacity: 0; */
}
</style>